import { LockOutlined } from '@ant-design/icons';
import { Modal,Form,Input } from 'antd';
import { useState,useRef } from 'react'
import { reg } from '@/utils/reg';
import React,{FC,useImperativeHandle} from 'react';
import { ShowFail } from '@/utils/message';
import { useRequest } from 'ahooks';
import { setpassApi } from '@/api/login';
import { userStore } from '@/mobx/store';
import { history } from 'umi';
type PassRefType = {
    target: string;
    changeOpen: () => void;
}
type setPAss = {

}
export const SetPass = React.forwardRef<PassRefType,setPAss>((props,ref) => { 
    const [form] = Form.useForm<{oldpass:string,password:string,newpass:string}>()
    const formRef = useRef(null)
    const [isModalOpen, setISModalOpen] = useState(false)
    const {
        Mydata:{
            getUserInfo
        }
    }=userStore()
    useImperativeHandle(ref,()=>{
        return {
            target:"opens",
            changeOpen(){
                setISModalOpen(true)
            }
        }
    })
    const dakai = ()=>{
        setISModalOpen(true)
    }
    const changpass = useRequest(setpassApi,({
        manual:true,
        onSuccess:(res:axiosType<setpasstypes>)=>{
            if(res.code ==200){
                history.replace('/login')
                getUserInfo({} as foundUserType)
                
            }
            
        }
    }))
    const handleOk = () => {
        form.validateFields()
        .then(res=>{
            changpass.run(form.getFieldValue('oldpass'),form.getFieldValue('newpass'))
        })
        .catch(res=>{
            ShowFail("表单验证失败")
        })
    }
    
    return (
        <div>
            <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={() => {form.resetFields();setISModalOpen(false)}}>
                <Form
                    layout="vertical"
                    ref={formRef}
                    form={form}
                    name="normal_login"
                    className="login-form"
                >

                    <Form.Item
                        name="oldpass"
                        label="旧密码"
                        rules={[
                            { required: true, message: '密码不能为空' },
                            {
                                pattern: reg.pwd,
                                message: '密码格式不正确'
                            }
                        ]}
                    >
                        <Input.Password
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="请输入旧密码"
                            allowClear
                        />
                    </Form.Item>
                    <Form.Item
                        name="newpass"
                        label="新密码"
                        dependencies={['dbnewpass','oldpass']}
                        rules={[
                            { required: true, message: '密码不能为空' },
                            {
                                pattern: reg.pwd,
                                message: '密码格式不正确'
                            },
                            ({ getFieldValue }:{ getFieldValue: (fieldName: string) => any; }) => ({
                                validator(_: any, value: string) {
                                    // 如果通过第二个密码的规则测试
                                    if (reg.pwd.test(value)) {
                                        // 如果密码不为空 而且关联的密码相同
                                        if (!value.trim() || getFieldValue('oldpass') !== value) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject(new Error('新密码不能和旧密码一样'));
                                    } else {
                                        return Promise.reject()
                                    }
                                },
                            }),
                        ]}
                    >
                        <Input.Password
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="请输入新密码"
                            allowClear
                        />
                    </Form.Item>
                    <Form.Item
                        name="dbnewpass"
                        label="确认密码"
                        dependencies={['newpass']}
                        rules={[
                            { required: true, message: '密码不能为空' },
                            {
                                pattern: reg.pwd,
                                message: '密码格式不正确'
                            },
                            ({ getFieldValue }) => ({
                                validator(_: any, value: string) {
                                    if (reg.pwd.test(value)) {
                                        if (!value || getFieldValue('newpass') === value) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject(new Error('两次密码不匹配'));
                                    } else {
                                        return Promise.reject()
                                    }
                                },
                            }),
                        ]}
                    >
                        <Input.Password
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="请输入确认密码"
                            allowClear
                        />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
})